<template>
  <div class="Table">
    <div class="tableTilte">
      {{ table1Tilte }}
    </div>
    <div class="tableContent">
      <el-table
        :data="table1Data"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="consultants" label="咨询师"> </el-table-column>
        <el-table-column prop="allReservations" label="预约人数">
        </el-table-column>
        <el-table-column prop="done" label="完成查询人数"> </el-table-column>
      </el-table>
    </div>

    <div class="tableTilte">
      {{ table2Tilte }}
    </div>
    <div class="tableContent">
      <el-table
        :data="table2Data"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="name" label="部门/严重程度"> </el-table-column>
        <el-table-column prop="oneLevel" label="一级"> </el-table-column>
        <el-table-column prop="twoLevel" label="二级"> </el-table-column>
        <el-table-column prop="threeLevel" label="三级"> </el-table-column>
        <el-table-column prop="fourLevel" label="四级"> </el-table-column>
        <el-table-column prop="fiveLevel" label="五级"> </el-table-column>
      </el-table>
      <div class="tableText">注：严重程度一级-五级，五级表示最严重</div>
    </div>

    <div class="tableTilte">
      {{ table3Tilte }}
    </div>
    <div class="tableContent">
      <el-table
        :data="table3Data"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="deptname" label="部门/问题分类">
        </el-table-column>
        <el-table-column prop="hl" label="婚恋情感"> </el-table-column>
        <el-table-column prop="qz" label="亲子关系"> </el-table-column>
        <el-table-column prop="zy" label="职业发展"> </el-table-column>
        <el-table-column prop="sh" label="社会交往"> </el-table-column>
        <el-table-column prop="gr" label="个人成长"> </el-table-column>
        <el-table-column prop="qg" label="情感问题"> </el-table-column>
        <el-table-column prop="xy" label="学业问题"> </el-table-column>
        <el-table-column prop="xw" label="行为问题"> </el-table-column>
        <el-table-column prop="qt" label="其他"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "consult",
  props: ["departALLData"],
  data() {
    return {
      ALLData: {},
      table1Tilte: "1. 咨询师工作统计",
      table2Tilte: "2. 部门查询情况分布",
      table3Tilte: "3. 咨询评估问题分布",
      table1Data: [],
      table2Data: [],
      table3Data: [
       
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      this.ALLData = this.departALLData;
      this.table1Data = this.ALLData.consultStatistics;
      this.table2Data = [
        {
          name: this.ALLData.departmentalConsulting.deptname,
          oneLevel: this.ALLData.departmentalConsulting["0"],
          twoLevel: this.ALLData.departmentalConsulting["1"],
          threeLevel: this.ALLData.departmentalConsulting["2"],
          fourLevel: this.ALLData.departmentalConsulting["3"],
          fiveLevel: this.ALLData.departmentalConsulting["4"],
        },
      ];
      this.table3Data = [
        {
          deptname: this.ALLData.problemDistribution.deptname,
          hl: this.ALLData.problemDistribution["1"],
          qz: this.ALLData.problemDistribution["2"],
          zy: this.ALLData.problemDistribution["3"],
          sh: this.ALLData.problemDistribution["4"],
          gr: this.ALLData.problemDistribution["5"],
          qg: this.ALLData.problemDistribution["6"],
          xy: this.ALLData.problemDistribution["7"],
          xw: this.ALLData.problemDistribution["8"],
          qt: this.ALLData.problemDistribution["order"],
        },
      ];
      console.log(this.ALLData.problemDistribution);
    }, 1000);
  },
  methods: {},
};
</script>

<style scoped>
.Table {
  width: 100%;
  text-align: start;
  margin: 2rem 0;
}
.tableTilte {
  font-size: 1rem;
  color: #cccccc;
  margin: 1rem 0;
}
.tableText {
  font-size: 0.7rem;
  color: #cccccc;
  margin-bottom: 1rem;
}
</style>